<div class="card toast {{toast.type}}"
     [ngClass]="{'has-button': !!toast.buttonLink, 'has-title': !!toast.title, 'has-message': !!toast.message}">
  <div  *ngIf="getIcon()"
        class="icon-holder">
    <span class="icon {{getIcon()}}"></span>
  </div>
  <div class="content">
    <h3 *ngIf="toast.title"
        class="title">
      {{toast.title}}
    </h3>
    <div class="message">
      {{toast.message}}
    </div>
    <div *ngIf="toast.buttonAction"
         class="action-button btn btn-primary"
         (click)="executeButtonAction()">
      {{toast.buttonLabel}}
    </div>
    <a *ngIf="toast.buttonLink"
       class="action-button btn btn-primary"
       [href]="toast.buttonLink"
       [target]="toast.buttonLinkTarget">
      {{toast.buttonLabel}}
    </a>
  </div>
  <div *ngIf="toast.dismissible"
       class="closer clickable"
       (click)="closeToast()">
    <span class="fa fa-times"></span>
  </div>
</div>
